<template>
  <div class="equip-management">
    <page>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="故障记录" name="hitchRecord">
          <hitch-record />
        </el-tab-pane>
        <el-tab-pane label="易损件更换记录" name="replaceRecord">
          <replace-record ref="replaceRecordRef" />
        </el-tab-pane>
        <el-tab-pane label="维护记录" name="maintenanceRecord">
          <maintenance-record ref="maintenanceRecordRef" />
        </el-tab-pane>
      </el-tabs>
    </page>
  </div>
</template>

<script>
import hitchRecord from "./hitchRecord";
import replaceRecord from "./replaceRecord";
import maintenanceRecord from "./maintenanceRecord";
export default {
  components: {
    hitchRecord,
    replaceRecord,
    maintenanceRecord,
  },
  data() {
    return {
      activeName: "hitchRecord",
    };
  },
  methods: {
    loadComponents(componentName) {
      const componentRef = this.$refs[componentName];
      if (!componentRef) {
        return;
      }
      if (componentRef.tableData?.length === 0) {
        componentRef?.getTableData();
      }
    },
    handleClick({ name } = {}) {
      this.loadComponents(`${name}Ref`);
    },
  },
};
</script>

<style lang="scss">
.equip-management {
  .pagination {
    text-align: right;
    padding: 15px 0;
  }
}
</style>
